﻿@{
    ViewBag.Title = "Chawysiwyg";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Head{
    <link href="@Url.Content("~/Content/font/css/bootstrap-formhelpers.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/font/css/bootstrap-formhelpers-countries.flags.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/font/css/bootstrap-formhelpers-currencies.flags.css")" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="@Url.Content("~/Content/font/js/bootstrap-formhelpers-selectbox.js")"></script>
    <script src="@Url.Content("~/Content/font/js/bootstrap-formhelpers-countries.en_US.js")"></script>
    <script src="@Url.Content("~/Content/font/js/bootstrap-formhelpers-countries.js")"></script>
}
<div class="container">
    <!-- Docs nav
    ================================================== -->
    <div class="row">
        <div class="span12">
            <!-- Countries
        ================================================== -->
            <section id="countries">
                
                <div class="page-header">
                    <h1><a href="http://vincentlamanna.com/BootstrapFormHelpers/">链接过去</a></h1>
                </div>

                <div class="page-header">
                    <h1>Countries <small>bootstrap-formhelpers-countries.js</small></h1>
                </div>
          
                <h3>About countries</h3>
                <p>For adding a drop-down of countries or display country name from country code, include bootstrap-formhelpers-countries.{language}.js and bootstrap-formhelpers-countries.js once alongside the other JS files.</p>
                <p>If you want to have access to the country flags, you can include bootstrap-formhelpers-countries.flags.css once alongside the other CSS files.</p>
                <h3>Use cases</h3>

                <p>Example for loading the list of countries and selecting a default country</p>
                <form class="bs-docs-example form-inline">
                    <select class="input-medium bfh-countries" data-country="US"></select>
                </form>
                <pre class="prettyprint">&lt;select class="input-medium bfh-countries" data-country="US"&gt;&lt;/select&gt;</pre>

                <p>Example for loading the list of countries, limited to a specific list of countries</p>
                <form class="bs-docs-example form-inline">
                    <select class="input-medium bfh-countries" data-countryList="US,AG,AU"></select>
                </form>
                <pre class="prettyprint">&lt;select class="input-medium bfh-countries" data-countryList="US,AG,AU"&gt;&lt;/select&gt;</pre>

                <p>Example for loading the list of countries in JavaScript and selecting a default country</p>
                <form class="bs-docs-example form-inline">
                    <button onclick="$('#countries1').bfhcountries({country: 'US'});return false;" class="btn">Load Countries</button>
                    <select id="countries1" class="input-medium"></select>
                </form>
                <pre class="prettyprint">&lt;button onclick="$('#countries1').bfhcountries({country: 'US'})" class="btn"&gt;Load Countries&lt;/button&gt;
&lt;select id="countries1" class="input-medium"&gt;&lt;/select&gt;</pre>

                <p>Example for loading the list of countries and flags using Bootstrap Form Helpers' Select Box</p>
                <form class="bs-docs-example form-inline">
                    <div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
                        <input type="hidden" value="">
                        <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
                            <span class="bfh-selectbox-option input-medium" data-option=""></span>
                            <b class="caret"></b>
                        </a>
                        <div class="bfh-selectbox-options">
                            <input type="text" class="bfh-selectbox-filter">
                            <div role="listbox">
                                <ul role="option">
                                </ul>
                            </div>
                        </div>
                    </div>
                </form>
                <pre class="prettyprint">&lt;div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true"&gt;
  &lt;input type="hidden" value=""&gt;
  &lt;a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#"&gt;
    &lt;span class="bfh-selectbox-option input-medium" data-option=""&gt;&lt;/span&gt;
    &lt;b class="caret"&gt;&lt;/b&gt;
  &lt;/a&gt;
  &lt;div class="bfh-selectbox-options"&gt;
    &lt;input type="text" class="bfh-selectbox-filter"&gt;
    &lt;div role="listbox"&gt;
    &lt;ul role="option"&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

                <p>Example for displaying the country name and flag from a country code</p>
                <form class="bs-docs-example form-inline">
                    <span class="bfh-countries" data-country="US" data-flags="true"></span>
                </form>
                <pre class="prettyprint">&lt;span class="bfh-countries" data-country="US" data-flags="true"&gt;&lt;/span&gt;</pre>
            </section>
        </div>
    </div>
</div>
